<!DOCTYPE html>
<html>

<head>
    <title>Web聊天室</title>
    <style>
        .container {
            display: flex;
            height: 100vh;
        }

        .contacts {
            width: 25%;
            border-right: 1px solid #ccc;
            overflow-y: auto;
        }

        .chat-area {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .messages {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
        }

        .input-area {
            padding: 10px;
            border-top: 1px solid #ccc;
        }

        .online {
            color: green;
        }

        .offline {
            color: gray;
        }
    </style>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <script>
        // GET请求示例（获取联系人列表）
        $.ajax({
            url: '/get_contacts',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#contact-list').empty();
                data.forEach(user => {
                    $('#contact-list').append(`<li class="${user.online ? 'online' : 'offline'}">${user.username}</li>`);
                });
            },
            error: function (xhr) {
                console.error('获取联系人失败:', xhr.statusText);
            }
        });

        // POST请求示例（发送消息）
        function sendMessage() {
            $.ajax({
                url: '/send_message',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    type: 'message',
                    from: username,
                    to: targetUser,
                    content: $('#message-input').val()
                }),
                success: function (data) {
                    if (data.status === 'success') {
                        $('#message-input').val('');
                    }
                }
            });
        }

        // 文件上传示例
        function sendFile() {
            const formData = new FormData();
            formData.append('file', $('#file-input')[0].files[0]);

            $.ajax({
                url: '/send_file',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log('文件上传成功');
                }
            });
        }
    </script>

    <div class="container">
        <div class="contacts">
            <h3>联系人</h3>
            <ul id="contact-list">
                <!-- 联系人列表将通过JavaScript动态加载 -->
            </ul>
        </div>
        <div class="chat-area">
            <div class="messages" id="message-area">
                <!-- 消息内容将通过JavaScript动态加载 -->
            </div>
            <div class="input-area">
                <input type="text" id="message-input" placeholder="输入消息...">
                <button onclick="sendMessage()">发送</button>
                <input type="file" id="file-input">
                <button onclick="sendFile()">发送文件</button>
            </div>
        </div>
    </div>
    <script src="{{ url_for('static', filename='chat.js') }}"></script>
</body>

</html>